<template>
	<div class="jl-row1">
		<div class="wp">
			<div class="jl-about1">
				<div class="jl-tit1">
					<div class="tit">创作中心</div>
				</div>
				<ul class="jl-tab1">
					<li v-for="(item, index) in options.list1" :key="index" :class="options.actNum == index ? 'on' : ''">
						<NuxtLink :to="item.link" class="btn">{{ item.tit }}</NuxtLink>
					</li>
				</ul>
				<div class="jl-form1">
					<div class="sobox">
						<div class="icn"><img src="/images/jl-i01.png" alt="" /></div>
						<div class="inp">
							<a-input v-model:value="formState.q" :bordered="false" placeholder="输入书籍名称/作者"
								allow-clear />
						</div>
						<div @click="getList()" class="btn">搜索</div>
					</div>
					<NuxtLink to="/bookInfo" class="addbtn">+创建作品</NuxtLink>
				</div>
				<div class="jl-table1">
					<a-table
					:dataSource="options.dataSource"
					:columns="options.columns"
					:pagination="false"
					 :scroll="{ x: 750 }">
						<template #bodyCell="{ column, record }">
							<template v-if="column.key === 'bookinfo'">
								<div class="bookinfo">
									<div class="pic"><img :src="record.bookimg" alt="" /></div>
									<div class="info">
										<div class="tit">{{ record.title }}</div>
										<div class="desc">哈希值：{{ record.id }}</div>
									</div>
								</div>
							</template>
							<template v-if="column.key === 'stage'">
								<div class="stage">{{ record.phase }}</div>
							</template>
							<template v-if="column.key === 'price'">
								<div class="price"><span>{{ record.price?.goldPrice }}</span>USD</div>
							</template>
							<template v-if="column.key === 'type'">
								<div class="type" style="color:#50B5DA" v-if="record.status == 'DRAFT'">已提交申请</div>
								<div class="type" style="color:#E46210" v-if="record.status == 'PENDING'">审核中</div>
								<div class="type" style="color:#FC6161" v-if="record.status == 'APPROVED'">审核未通过</div>
								<div class="type" style="color:#50B5DA" v-if="record.status == 'PUBLISHED'">已通过</div>
							</template>
							<template v-if="column.key === 'action'">
								<div class="links">
									<NuxtLink :to="'/marketDetails?id=' + record.id" class="v1">详情</NuxtLink>
									<NuxtLink to="/" class="v2">下架</NuxtLink>
								</div>
								<div class="links">
									<NuxtLink :to="'/bookInfo?id=' + record.id" class="v1">编辑</NuxtLink>
									<span  @click="deleteBook(record.id)" class="v2 cur">删除</span>
								</div>
							</template>
						</template>
					</a-table>
				</div>
				<div class="m-pages">
					<a-pagination v-model:current="current1" show-quick-jumper :total="total" @change="onChange" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import Cookies from 'js-cookie';
import { reactive, ref, onMounted } from 'vue';
import {RouterLink, RouterView, useRouter} from 'vue-router'
import request from '~/services/request'
import { message } from 'ant-design-vue';
const router = useRouter()
const current1 = ref(1);
const total = ref(0);
const S3 = ref(null)
const formState = reactive({
	skip: (current1.value - 1) * 10,
	take: 10,
	sort: 'title_desc',
	q: '',
})
const onChange = (page) => {
	current1.value = page;
	formState.skip = (current1.value - 1) * 10
	getList()
};
function getList() {
	if (!formState.q) {
		delete formState.q
	}
	request.get_books_my(formState)
		.then(res => {
			res.results.forEach(val=>{
				val.bookimg=val.bannerImages[0]
				val.currentPrice=val[val.phase.toUpperCase().toLowerCase()+'Price']
			})
			options.dataSource=res.results
			total.value = res.total
		})
}
const options = reactive({
	actNum: 0,
	list1: [{
		tit: '我的作品',
		link: '/myWorks'
	},
	{
		tit: '作品收益',
		link: '/incomeFromWorks'
	},
	{
		tit: '帮助中心',
		link: '/helpCenter'
	},
	],
	value1: '',

	dataSource: [],

	columns: [{
		title: '书籍信息',
		dataIndex: 'bookinfo',
		key: 'bookinfo',
	},
	{
		title: '最新版单价',
		dataIndex: 'price',
		key: 'price',
		align: 'center'
	},
	{
		title: '当前阶段',
		dataIndex: 'stage',
		key: 'stage',
		align: 'center'
	},
	{
		title: '状态',
		dataIndex: 'type',
		key: 'type',
		align: 'center'
	},
	{
		title: '操作',
		key: 'action',
		align: 'center'
	},
	],
});
function deleteBook(id){
	request.delete_books_by_id({id:id})
		.then(res => {
			getList()
			message.success({
      content: () => '删除成功！',
      class: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    });
		})
}
onMounted(async () => {
	if (!Cookies.get('user-data')) {
    message.error({
      content: () => '请先登录！',
      class: 'custom-class',
      style: {
        marginTop: '20vh',
      },
    });
    router.push('/login')
    return false
  }
	let script = document.createElement('script');
  script.src = '/aws-sdk-2.1673.0.min.js';
  script.onload = () => {
    // 脚本加载完毕后的回调
    AWS.config.update({
      accessKeyId: 'AKIA23OJK3X3H2OI5MLV',
      secretAccessKey: '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',
      region: 'ap-northeast-1'
    })

    S3.value = new AWS.S3({
      apiVersion: "2006-03-01",
      params: { Bucket: 'silentberry.co' }
    })
  };
  document.body.appendChild(script);
	getList()
});
</script>

<style></style>